<template>
	<view :id="elId" class="v-tabs" :style="{padding}">
		<scroll-view :scroll-x="scroll" :scroll-left="scroll ? scrollLeft : 0" :scroll-with-animation="scroll">
			<view class="v-tabs__container" :style="{display: scroll ? 'inline-flex' : 'flex',whiteSpace: scroll ? 'nowrap' : 'normal'}">
				<view class="v-tabs__container-item" :class="{items:items == 1}" v-for="(v, i) in tabs" :key="i" :style="{'min-width': minWidth?minWidth+'%':'auto'}" @click="change(i)">
					<view>
						<view class="topname" :style="{fontSize: current == i ? activeFontSize : fontSize,'--color': activeColor?activeColor:color_}" :class="{thmeColor: current == i}">{{ v[nameKey] }}</view>
						<view class="secname" v-if='v.classify_info' :class="{thmeColor_plus: current == i}" :style="{'--color': color_}">
							{{v.classify_info}}
						</view>
					</view>
				</view>
				<view v-if="!pills" class="v-tabs__container-line thmeBg" :style="{
          '--color': color_,
          width: lineWidth + 'px',
          height: lineHeight,
          borderRadius: lineRadius,
          left: lineLeft + 'px',
          transform: `translateX(-${lineWidth / 2}px)`
        }"></view>
				<view v-else class="v-tabs__container-pills" :style="{
          background: pillsColor,
          borderRadius: pillsBorderRadius,
          left: pillsLeft + 'px',
          width: currentWidth + 'px',
          height
        }"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 0
			},
			tabs: {
				type: Array,
				default () {
					return []
				}
			},
			items:{
				type:Number,
				default:0
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			padding: {
				type: String,
				default: '0'
			},
			color: {
				type: String,
				default: '#333'
			},
			activeColor: {
				type: String,
				default: ''
			},
			fontSize: {
				type: String,
				default: '24rpx'
			},
			activeFontSize: {
				type: String,
				default: '28rpx'
			},
			bold: {
				type: Boolean,
				default: true
			},
			scroll: {
				type: Boolean,
				default: true
			},
			height: {
				type: String,
				default: '100rpx'
			},
			lineColor: {
				type: String,
				default: '#2979ff'
			},
			lineHeight: {
				type: String,
				default: '6rpx'
			},
			lineScale: {
				type: Number,
				default: 0.5
			},
			lineRadius: {
				type: String,
				default: '6rpx'
			},
			pills: {
				type: Boolean,
				deafult: false
			},
			pillsColor: {
				type: String,
				default: '#2979ff'
			},
			pillsBorderRadius: {
				type: String,
				default: '10rpx'
			},
			field: {
				type: String,
				default: ''
			},
			minWidth: {
				type: String,
				default: ''
			},
			nameKey: {
				type: String,
				default: "classify_name"
			}
		},
		data() {
			return {
				color_: getApp().globalData.color,
				elId: '',
				lineWidth: 24,
				currentWidth: 0, // 当前选项的宽度
				lineLeft: 0, // 滑块距离左侧的位置
				pillsLeft: 0, // 胶囊距离左侧的位置
				scrollLeft: 0, // 距离左边的位置
				containerWidth: 0, // 容器的宽度
				current: 0 // 当前选中项
			}
		},
		watch: {
			value(newVal) {
				this.current = newVal
				this.$nextTick(() => {
					this.getTabItemWidth()
				})
			},
			current(newVal) {
				this.$emit('input', newVal)
			}
		},
		methods: {
			// 产生随机字符串
			randomString(len) {
				len = len || 32
				let $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678' /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
				let maxPos = $chars.length
				let pwd = ''
				for (let i = 0; i < len; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos))
				}
				return pwd
			},
			// 切换事件
			change(index) {
				if (this.current !== index) {
					this.current = index
					this.$emit('change', index)
				}
			},
			// 获取左移动位置
			getTabItemWidth() {
				let query = uni.createSelectorQuery().in(this)
				// 获取容器的宽度
				query.select(`#${this.elId}`).boundingClientRect((data) => {
					if (!this.containerWidth && data) {
						this.containerWidth = data.width
					}
				}).exec()
				// 获取所有的 tab-item 的宽度
				query.selectAll('.v-tabs__container-item').boundingClientRect((data) => {
					if (!data) {
						return
					}
					let lineLeft = 0
					let currentWidth = 0
					if (data) {
						for (let i = 0; i < data.length; i++) {
							if (i < this.current) {
								lineLeft += data[i].width
							} else if (i == this.current) {
								currentWidth = data[i].width
							} else {
								break
							}
						}
					}
					// 当前滑块的宽度
					this.currentWidth = currentWidth
					// 缩放后的滑块宽度
					// this.lineWidth = currentWidth * this.lineScale * 1
					// 滑块作移动的位置
					this.lineLeft = lineLeft + currentWidth / 2
					// 胶囊距离左侧的位置
					this.pillsLeft = lineLeft
					// 计算滚动的距离左侧的位置 && this.current > 0
					if (this.scroll && this.current > 0) {
						this.scrollLeft = this.lineLeft - this.containerWidth / 2
					}
				}).exec()
			}
		},
		mounted() {
			this.elId = 'xfjpeter_' + this.randomString()
			this.current = this.value
			this.$nextTick(() => {
				this.getTabItemWidth()
			})
		}
	}
</script>

<style lang="scss" scoped>
	.items{
		padding: 0 24rpx;
	}
	.v-tabs {
		width: 100%;
		box-sizing: border-box;
		overflow: hidden;

		&__container {
			position: relative;
			display: inline-flex;
			align-items: center;
			white-space: nowrap;
			// overflow: hidden;
			min-width: 100%;
			min-height: 66rpx;

			view {
				color: #333333;
			}

			&-item {
				display: flex;
				align-items: center;
				height: 100%;
				position: relative;
				z-index: 10;
				flex: 1;
				// padding: 0 24rpx;
				transition: all 0.2s;
				white-space: nowrap;
				color: #333333;
				text-align: center;

				>view {
					margin: 0 auto;
				}

				.topname {
					font-weight: bold;
					// max-width: 140rpx;
					// max-width: 200rpx;
					overflow: hidden;
				}

				.secname {
					font-size: 18rpx;
					color: #999999;
					padding: 6rpx 16rpx;
					// max-width: 150rpx;
					// max-width: 210rpx;
					margin: 0 auto;
					overflow: hidden;
					text-align: center;
				}
			}

			&-line {
				position: absolute;
				bottom: 0;
				transition: all 0.2s linear;
			}

			&-pills {
				position: absolute;
				top: 0;
				transition: all 0.2s linear;
				z-index: 9;
			}
		}
	}

	/deep/ ::-webkit-scrollbar {
		display: none;
	}
	
	.thmeColor_plus{
		padding:20rpx;
		background: var(--color);
		border-radius: 20rpx;
		-webkit-border-radius: 20rpx;
		color:#FFFFFF !important;
	}
</style>
